<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
		</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			//过滤器使用
			//局部
			//1.声明过滤器
			//2.{{数据 | 过滤器的名字 }}
	
			//全局
			Vue.filter('myReverse',function(value,option){
				return option+value.split('').reverse().join('');
			})
			
			//1.声明局部组件(声子)
			var App={
				data(){
					return{
						price:'12',
						msg:'hello filter',
						stus:[{name:'jack'}],
						money:'7498'
					}
				},
				//组件必有一个模板
				template:`
					<div>
						<input type="number" v-model='price' />
						<h3>{{price | myCurrentcy}}</h3>
						<h4>{{msg | myReverse('传过去的参数')}}</h4>
						<h4>{{money | myCurrentcy()}}</h4>
						<h5>{{stus[0].name}}</h5>
			            计算属性：{{total}}
						
					</div>
				`,
				components:{
					
				},
				filters:{//过滤器
					//1.声明过滤器
					myCurrentcy:function(value){
						return "￥"+value;
					}
				},
				watch:{//侦听器，一次只能侦听一个
				//基本的数据类型 简单监视
				//复杂的数据类型 深度监视
					price:function(newV,oldV){//(新值，旧值)
						console.log(newV,oldV);
						//当你满足某一条件的时候，输出
						if(newV ==='123'){
							console.log('123来了');
						}
					},
					stus:{
						deep:true,//深度监视,值改变时发生
						handler:function(newV,oldV){
							console.log(newV[0].name);
						}
					}
				},
				/* 
					计算属性，里面写方法，和menthod一样，只不过它会自动过滤重复请求的操作，
					所以遇到多次重复的操作时，可以在components里面写方法，而不是在menthod里面
					也就是计算属性是有缓存的，而menthod方法没有，涉及到庞大的数据计算时，用计算属性就好，
					不用每次调用都计算一遍
				*/
				computed:{//计算属性，必须要有返回值。处理页面的逻辑处理
					total:function(){//可以多个一起侦听
						return this.price+this.msg+this.stus[0].name
					}
				}
				
			};
			new Vue({
				el:'#app',
				data(){
					return{
						
					}
				},
				//2.挂载局部组件(挂子)
				components:{
					App
				},
				//3.用子
				template:'<App />'
			});
		</script>
	</body>
</html>
